Categories
JavaScript Interview Questions

JavaScript Interview Questions — Objects

Spread the love

To get a job as a front end developer, we need to nail the coding interview.

In this article, we’ll look at some object questions.

How to check if a certain property exists in an object?

There’re a few ways to check if a property exists in an object.

First, we can use the in operator. For example, we can use it as follows:

const foo = { a: 1 };
console.log('a' in foo);

The in operator checks if the property with the given name exists in the object itself or its prototypes in the prototype chain.

The code above should return true since a is a property of foo .

console.log(‘toString’ in foo); should also log true since toString is in the Object ‘s prototype, which foo inherits from.

We can also use the Object.prototype.hasOwnProperty method. For example, we can use it as follows:

const foo = { a: 1 };
console.log(foo.hasOwnProperty('a'));

The code above uses the hasOwnProperty method in foo ‘s prototype to check if a exists in foo and its own property, which means that it’s in foo itself rather than its prototype.

The console.log logs true since a is foo ‘s own property.

Finally, we can check using the bracket notation as follows:

const foo = {
  a: 1
};
console.log(foo['a']);

If it returns the value other than undefined , then we know we added it as a property.

Since this is the case with our example, it should return true .

What’s the difference between Object.seal and Object.freeze methods?

After calling Object.seal on an object, we stop properties from being added to the object.

It also makes all existing properties non-configurable, which means the property descriptors are prevented from changing.

Existing properties also can’t be removed with the delete operator after it’s called on an object.

The object’s __proto__ property, which is the object’s prototype, is also sealed.

For example, if we have:

const foo = {
  a: 1
};
Object.seal(foo);
delete foo.a

We’ll still see foo.a after we run the last line.

If we’re in strict mode, we’ll get an error.

Object.freeze makes the object immutable. Existing properties can’t be changed in any way, including the values of each property.

It also does everything that Object.seal does.

What’s the difference between the in operator and the hasOwnProperty method in objects?

The in operator checks if a property is in the object itself and if it’s in its prototypes up the prototype chain.

On the other hand, hasOwnProperty only checks if an object is inside the object that it’s called on and not any of its prototypes.

Why does typeof null return object?

null has type object because it’s how it acts in early versions of JavaScript. It just stays this way to prevent breaking existing codebases.

How to check if a value is null?

We should use the strict equality operator to check for null as follows:

foo === null

What does the new keyword do?

The new keyword is used to create an object from constructor functions or classes.

For example, if we have a Person class:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
};

Then we can create a new instance of it by writing:

const person = new Person("Jane", "Smith");

new does a few things:

  • It creates an empty object
  • Assigns the empty object to the this value
  • The function inherits from the prototype property of the constructor function. So Person inherits from Person.prototype .
  • If there’s no return statement in the function, then it’ll return this .

Note that the class syntax in ES2015 or later is just syntactic sugar for constructor functions. It does the same thing but looks like a class.

Conclusion

We can check if a property exists in an object with the in operator, hasOwnProperty , or bracket notation.

Object.seal prevent property descriptors from changing and properties from being deleted.

Object.freeze makes an object immutable.

null is of type object rather than having its own type.

The new keyword makes a new object from a constructor function and returns it.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *